<template>
	<div class="Switch-body">
		<input type="checkbox" id="mySwitch" ref="mySwitchRef">
		<label for="mySwitch"></label>
	</div>
</template>

<script setup>
	// export default {
	// 	mounted() {
	// 		const switchCheckbox = this.$refs.mySwitchRef; // 通过 $refs 获取元素
	// 		if (switchCheckbox) {
	// 			switchCheckbox.addEventListener('change', () => {
	// 				this.$nextTick(() => {
	// 					if (switchCheckbox.checked) {
	// 						this.toggleNavigationStyles(true);
	// 					} else {
	// 						this.toggleNavigationStyles(false);
	// 					}
	// 				});
	// 			});
	// 		}
	// 	},
	// 	methods: {
	// 		toggleNavigationStyles(isChecked) {
	// 			const navigationLeftul = document.querySelectorAll('.na-ul');
	// 			navigationLeftul[0].classList.toggle('switch-color', isChecked);

	// 			const navigationLeftli = document.querySelectorAll('.down_bar');
	// 			navigationLeftli[0].classList.toggle('switch-color', isChecked);
				
	// 			const navigationRightElements = document.querySelectorAll('.login');
	// 			navigationRightElements[0].classList.toggle('switch-color', isChecked);
	// 		}
	// 	}
	// };
</script>

<style lang="scss" scoped>
	/* 整体开关容器样式 */
	.Switch-body {
		position: relative;
		display: inline-block;
		width: 80px;
		height: 30px;
	}

	/* 隐藏原始的checkbox输入框 */
	.Switch-body input[type="checkbox"] {
		opacity: 0;
		width: 0;
		height: 0;
	}

	/* 滑块样式（label标签模拟滑块外观） */
	.Switch-body label {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		border-radius: 30px;
		transition: background-color 0.4s;
		background-image: url('../../static/img/img2.jpg');
		/* 初始关闭状态背景图片 */
		background-size: cover;
		background-position: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		/* 添加了一个淡淡的投影效果 */
	}

	/* 滑块上的圆形指示器样式（用于模拟滑块的切换效果） */
	.Switch-body label::before {
		position: absolute;
		content: "";
		height: 22px;
		width: 22px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		border-radius: 50%;
		transition: transform 0.4s;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
		/* 添加内阴影效果 */
	}

	/* 当checkbox被选中（开启状态）时的样式调整 */
	.Switch-body input[type="checkbox"]:checked+label {
		/* background-color: #2196F3; */
		background-image: url('../../static/img/img5.jpg');
		/* 开启状态背景图片 */
	}

	/* 当checkbox被选中时，滑块圆形指示器的位置移动 */
	.Switch-body input[type="checkbox"]:checked+label::before {
		transform: translateX(50px);
	}

	.Switch-body label::before {
		position: absolute;
		content: "";
		height: 22px;
		width: 22px;
		left: 4px;
		bottom: 4px;
		background-color: #abbfcc;
		border-radius: 50%;
		transition: transform 0.4s;
		display: block !important;
		/* 确保伪元素能显示，可根据实际冲突情况添加其他关键属性并使用!important */
	}
</style>